<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 300px;
				height: 300px;
				border: 1px solid #000;
				margin: 20px auto;
				position: relative;
			}

			#c1 {
				position: absolute;
				transition: all 5s;
			}

			#c2 {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				background-color: rgba(0, 0, 0, 0.3);
				border-radius: 50%;
			}

			.btn {
				width: 60px;
				height: 60px;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				border: none;
				outline: none;
				border-radius: 50%;
				cursor: pointer;
				background: transparent;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<canvas id="c1" width="300px" height="300px"></canvas>
			<canvas id="c2" width="120px" height="120px"></canvas>
			<button class="btn">开始</button>
		</div>
		<script type="text/javascript">
			var oC1 = document.getElementById('c1');
			var oC2 = document.getElementById('c2');
			var ctx1 = oC1.getContext('2d');
			var ctx2 = oC2.getContext('2d');
			var font1 = ['谢谢参与', 1000, 10, 500, 100, 4999, 1, 20];
			var font2 = ['再接再厉', '元', '元', '淘金币', '元', '淘金币', '元', '淘金币'];

			// 点击按钮进行抽奖
			var oBtn = document.querySelector('.btn');
			var num = 0;
			var angle = 0;
			var tips = '';
			oBtn.onclick = function() {
				//当前按钮禁用状态
				this.disabled = true;
				rotateAngle(num);
				//当动画结束，恢复按钮状态
				setTimeout(function() {
					oBtn.disabled = false;
					alert(tips);
					num++;
				}, 5000);
			}



			function rotateAngle(num) {
				//获取1-100之间的随机数
				var count = Math.floor(Math.random() * 100 + 1);
				console.log(count);
				if (count >= 1 && count <= 57) {
					angle = 1800;
					tips = font1[0] + font2[0];
				} else if (count >= 58 && count <= 69) {
					angle = 1845;
					tips = font1[7] + font2[7];
				} else if (count >= 70 && count <= 79) {
					angle = 1890;
					tips = font1[6] + font2[6];
				} else if (count >= 80 && count <= 86) {
					angle = 2025;
					tips = font1[3] + font2[3];
				} else if (count >= 87 && count <= 93) {
					angle = 2070;
					tips = font1[2] + font2[2];
				} else if (count >= 94 && count <= 97) {
					angle = 1925;
					tips = font1[5] + font2[5];
				} else if (count >= 98 && count <= 99) {
					angle = 1980;
					tips = font1[4] + font2[4];
				} else {
					angle = 2115;
					tips = font1[1] + font2[1];
				}
				oC1.style.transform = 'rotate(' + (1800 * num + angle) + 'deg)';
			}

			//画转盘
			createCircle();
			// 文字
			createText();
			// 画指针
			createPointer();

			function createCircle() {
				var startA = 0; //用来保存起始弧度
				var endA = 0; //用来保存结束弧度

				for (i = 0; i < 8; i++) {
					startA = -22.5 * Math.PI / 180 + i * Math.PI / 4;
					endA = startA + Math.PI / 4;
					ctx1.save();
					ctx1.beginPath();
					if (i % 2 == 0) {
						ctx1.fillStyle = 'rgb(120,120,120)';
					} else {
						ctx1.fillStyle = 'rgb(98,98,98)';
					}
					ctx1.moveTo(150, 150);
					ctx1.arc(150, 150, 150, startA, endA, false);
					ctx1.fill();
					ctx1.closePath();
					ctx1.restore();
				}
			}

			function createText() {
				ctx1.save();
				ctx1.translate(150, 150);
				ctx1.textAlign = 'center';
				ctx1.font = '18px 微软雅黑';
				ctx1.fillStyle = '#ccbc2a'
				for (var i = 0; i < font1.length; i++) {
					ctx1.fillText(font1[i], 0, -110);
					ctx1.save();
					ctx1.font = '14px 微软雅黑';
					ctx1.fillText(font2[i], 0, -90);
					ctx1.restore();
					ctx1.rotate(Math.PI / 4);
				}
				ctx1.restore();
			}

			function createPointer() {
				ctx2.save();
				ctx2.translate(60, 60);
				ctx2.beginPath();
				ctx2.fillStyle = 'red';
				ctx2.moveTo(0, -60);
				ctx2.arc(0, 0, 30, -75 * Math.PI / 180, -105 * Math.PI / 180);
				ctx2.fill();
				ctx2.closePath();
				ctx2.restore();
			}
		</script>
	</body>
</html>
